// 创建裁剪区
let $image = $('#image');
// 设置配置项
var option = {
    // 宽高比
    aspectRatio: 1, //正方形
    // 预览区域
    preview: '.img-preview'

};
// 调用cropper方法创建裁剪区
$image.cropper(option);

// 点击上传，实现选择图片
$('button:contains("选择头像")').on('click', function () {
    $('#file').trigger('click');
})

// 更换剪裁区图片
$('#file').on('change', function () {
    // console.log(12)
    if (this.files.length > 0) {
        // 3.1 找到文件对象
        // console.dir(this);
        var fileObj = this.files[0];
        // 3.2 为文件对象创建临时的url
        var url = URL.createObjectURL(fileObj);
        // console.log(url);
        // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
        $image.cropper('destroy').attr('src', url).cropper(option);
    }
});

// 点击确认，更改头像button
$('button:contains("确认修改")').on('click', function () {
    // 裁剪图片
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 30,
        height: 30
    });
    // canvas转换字符串
    let base64 = canvas.toDataURL();
    // ajax提交
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: {
            avatar: base64
        },
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                // 更新index.html的头像
                window.parent.renderUser();
            }
        }
    })
})